<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>录单</title>
    <link rel="stylesheet" href="assets/css/amazeui.min.css">
    <link rel="stylesheet" href="assets/css/app.css">
    <link rel="stylesheet" href="css/index/index.css">
</head>

<body>
    <header class="h45">
        <ul>
            <li class="header_left">
                <img src="img/left.png" width="10" height="16">
            </li>
            <li class="header_center">做单</li>
            <li class="header_right">
                <a href="javascript:;">记录</a>
            </li>
        </ul>
    </header>

    <div class="input_container">
        <div class="h45 marTop_15">
            会员账号
            <input type="text" placeholder="输入会员账号">
            <i class="sao"></i>
        </div>
        <div class="h45 marTop_15">
            消费金额
            <input type="text" placeholder="输入消费金额">
        </div>
        <div class="h45 marTop_15">
            积分释放
            <p>100</p>
        </div>
        <p class="color_gray h30">支付方式</p>
        <div class="h45">
            <label>
                <input type="radio" name="radio" checked>
                <i></i>微信
            </label>
            <label>
                <input type="radio" name="radio">
                <i></i>支付宝
            </label>
            <label>
                <input type="radio" name="radio">
                <i></i>银行卡
            </label>
        </div>
        <div class="h45 marTop_1">
            账号
            <p>13645220211</p>
        </div>
        <p class="color_gray h30">上传凭证</p>
        <div class="upload_img_wrap">
            <div class="upload_img">
                <img class="imageFileInput" src="img/upload_img.png" alt="上传凭证" width="60" height="60">
                <input type="file" class="fileInput">
            </div>
        </div>
    </div>
    <div class="bottom_btn">
        <button class="h45" tyep="button">确定</button>
    </div>
    <script src="js/jquery-1.11.3.js"></script>
    <script>
        $(".fileInput").change(function () {
            var objUrl = getObjectURL(this.files[0]);
            // console.log("objUrl = " + objUrl);
            if (objUrl) {
                $(".imageFileInput").attr("src", objUrl);
            }
        });
        //建立一個可存取到該file的url
        function getObjectURL(file) {
            var url = null;
            if (window.createObjectURL != undefined) { // basic
                url = window.createObjectURL(file);
            } else if (window.URL != undefined) { // mozilla(firefox)
                url = window.URL.createObjectURL(file);
            } else if (window.webkitURL != undefined) { // webkit or chrome
                url = window.webkitURL.createObjectURL(file);
            }
            return url;
        }
    </script>
</body>

</html>